<template>
  <!-- 展示全部订单的结构 -->
  <el-card>
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <!-- 提供用户选择的下拉菜单 -->
    <el-form :inline="true">
      <el-form-item label="就诊人">
        <el-select placeholder="请选择就诊人" v-model="patientId" @change="changeUser"  style="width:160px">
          <el-option label="请选择全部就诊人" value />
          <el-option :label="item.name" :value="item.id" v-for="(item) in allUser" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="changeUser"  style="width:160px">
          <el-option label="请选择全部订单状态" value="" />
          <el-option
            :label="item.comment"
            :value="item.status"
            v-for="(item,index) in allOrderState"
            :key="index"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格展示订单的数据 -->
    <el-table border style="margin:15px 0" :data="allOrderArr">
      <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
      <el-table-column label="医院" prop="hosname"></el-table-column>
      <el-table-column label="科室" prop="depname"></el-table-column>
      <el-table-column label="医生" prop="title"></el-table-column>
      <el-table-column label="服务费" prop="amount"></el-table-column>
      <el-table-column label="就诊人" prop="patientName"></el-table-column>
      <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" @click="goDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @current-change="handler"
      @size-change="handlerSize"
    />
  </el-card>
</template>
  
<script lang="ts" setup>
// @ts-ignore
import { ref, onMounted } from "vue";
// @ts-ignore
import { reqUserInfoOrder,reqAllUser,reqOrderState } from "@/api/user";
// @ts-ignore
import type { UserOrderInfoResponseData, Records,AllUser,AllUserResponseData, AllOrderState,AllOrderStateResponse } from "@/api/user/type"
import { useRouter } from "vue-router"
let router=useRouter()
// 当前分页器处于第几页
let pageNo = ref<number>(1);
// 当前页码展示几条数据
let pageSize = ref<number>(10);
// 收集就诊人的id
let patientId = ref<string>("");
// 订单的状态
let orderStatus = ref<string>("");
// 存储全部的订单
let allOrderArr=ref<Records>([])
// 存储订单的总个数
let total=ref<number>(0)
// 存储全部就诊人的信息
let allUser=ref<AllUser>([])
// 存储全部的订单的状态
let allOrderState=ref<AllOrderState>([])
const getOrderInfo = async () => {
  let result:UserOrderInfoResponseData=await reqUserInfoOrder(pageNo.value,pageSize.value,patientId.value,orderStatus.value);
    if(result.code==200){
        allOrderArr.value=result.data.records
        total.value=result.data.total
    }
};
// 获取就诊人与订单状态
const getData=async()=>{
    // 获取全部的就诊人信息
    const result:AllUserResponseData=await reqAllUser()
    const result1:AllOrderStateResponse=await reqOrderState()
    allUser.value=result.data
    allOrderState.value=result1.data
}
onMounted(() => {
  // 获取订单的方法
  getOrderInfo();
    // 获取全部就诊人的信息以及获取全部订单的状态
    getData();
});
const goDetail=(row:any)=>{
    router.push({path:'/user/order',query:{orderId:row.id}})
}
// 翻页
const handler=(pager:number)=>{
    pageNo.value=pager;
    getOrderInfo();
}
// 下拉菜单翻页
const handlerSize=(value:number)=>{
    pageSize.value=value
    getOrderInfo();
}
// 就诊人下拉菜单回调
const changeUser=()=>{
    getOrderInfo();
}
</script>
  
<style lang="scss" scoped>
.el-card {
  padding: 10px 0 20px;
}
</style>
